import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { IonHeader, IonToolbar, IonButtons, IonMenuButton, IonTitle, IonContent } from '@ionic/angular/standalone';
import { register } from 'swiper/element/bundle';

register();

@Component({
  selector: 'app-folder',
  templateUrl: './folder.page.html',
  styleUrls: ['./folder.page.scss'],
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  imports: [IonHeader, IonToolbar, IonButtons, IonMenuButton, IonTitle, IonContent],
})
export class FolderPage implements OnInit {
  public folder!: string;
  private activatedRoute = inject(ActivatedRoute);
  public slides = [
    {title: '1', content: '星期天，天气晴朗，太阳红彤彤的，照在人身上暖洋洋的。这天是小猫咪咪三岁的生日，它穿了一件红衣服，戴了一顶红帽子，可漂亮了。', questions:[{title: '最好选择孩子感兴趣的活动，以游戏的方式进行。'},{title: '任务设计应遵循由简到繁、循序渐进的原则；'},{title: '在提出训练任务时语言要明确、具体，确保孩子真的理解所要进行的学习或训练任务；'},{title: '为孩子提供一个安静的环境，尽量减少无关刺激和干扰；'}]},
    {title: '2', content: '小猫咪咪烤了一个香喷喷的大蛋糕，又拿来三支红色蜡烛，插在生日蛋糕上。小猫咪咪跪在椅子上，划亮一根火柴，点燃了红蜡烛。', questions:[{title: '22'},{title: '11'},{title: '11'}]},
    {title: '3', content: '小猫咪咪扔掉手里的火柴，跳下椅子，跑出屋门。它向小鸡招招手，说：“小鸡弟弟，欢迎你！”小鸡说：“今天是你的生日，我送你三条小虫吧！”', questions:[{title: '33'},{title: '11'},{title: '11'}]}];
  public swiperOptions = {
    direction: 'horizontal',
    loop: true,
    centeredSlides: true,
    slidesPerView: 1.25,
    spaceBetween: 0,
    keyboard: {
      enabled: true,
    },
    // navigation: {
    //   nextEl: '.swiper-button-next',
    //   prevEl: '.swiper-button-prev',
    // }
  };
  constructor() { }

  ngOnInit() {
    this.folder = this.activatedRoute.snapshot.paramMap.get('id') as string;

    const swiperEl = document.querySelector('swiper-container')!;

    swiperEl.addEventListener('swiperprogress', (event) => {
      // const [swiper, progress] = event.detail;
    });

    swiperEl.addEventListener('swiperslidechange', (event) => {
      console.log('slide changed', event);
    });
  }

  prev() {
    const swiperEl = document.querySelector('swiper-container')!;
    swiperEl.swiper.slidePrev();
  }
  next() {
    const swiperEl = document.querySelector('swiper-container')!;
    swiperEl.swiper.slideNext();
  }
}
